<style lang="less" scoped>
  @import './index.less';
</style>
<template>
  <div class="page container ">
    <div class="publish">
      <div class="title">
        创建帖子
      </div>
      <div class="form">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-form-model-item label="URL：" prop="url">
            <a-input v-model="form.url" size="large" />
          </a-form-model-item>
          <a-form-model-item label="标题：" prop="title">
            <a-input v-model="form.title" size="large" />
          </a-form-model-item>
          <!-- TODO: 标签 -->
          <a-form-model-item label="标签：" prop="label">
            <a-select
              v-model="form.label"
              mode="multiple"
              style="width: 100%"
              placeholder=""
              :open="tagsSelectOpen"
              @focus="tagsSelectFocus"
            >
              <!--  slot-scope="menu" -->
              <div slot="dropdownRender">
                <v-tags-select :selected="form.label" :data-sourse1="dataSourse1" :data-sourse2="dataSourse2" @select="selectFn"></v-tags-select>
              </div>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="内容:">
            <div class="content-wrap">
              <!-- <a-tabs v-model="tabsKey">
                <a-tab-pane :key="1">
                  <span slot="tab">
                    <v-icon type="todo" />
                    发帖
                  </span>
                </a-tab-pane>
                <a-tab-pane :key="2">
                  <span slot="tab">
                    <v-icon type="picture" />
                    发图片/视频
                  </span>
                </a-tab-pane>
                <a-tab-pane :key="3">
                  <span slot="tab">
                    <v-icon type="link" />
                    发链接
                  </span>
                </a-tab-pane>
              </a-tabs> -->
              <a-input v-model="form.content" class="m-textarea" type="textarea" :auto-size="{ minRows: 6, maxRows: 16 }" />
              <!-- <div v-if="tabsKey===2" />
              <a-input v-if="tabsKey===3" v-model="form.content3" class="m-input" size="large" /> -->
              <div class="content-foot">
                <a-button class="upload-btn" ghost type="primary" size="small">
                  <v-icon type="picture" />
                  提交
                </a-button>
                <p class="text">
                  可用Markdown格式
                </p>
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="作者：" prop="zz" class="m-checkbox">
            <a-checkbox-group v-model="form.zz">
              <a-checkbox value="1" name="zz">
                我是该URL帖子或者以上内容的原创
              </a-checkbox>
              <a-checkbox value="2" name="zz">
                匿名发帖
              </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="提醒：" prop="tx">
            <a-checkbox-group v-model="form.tx">
              <a-checkbox value="1" name="tx">
                如有回复，开启电子邮件和系统提醒
              </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="合并：" prop="merge">
            <a-input v-model="form.merge" size="large" />
          </a-form-model-item>
          <a-form-model-item label="标题删除原因：：" prop="reason">
            <a-input v-model="form.reason" size="large" />
          </a-form-model-item>
        </a-form-model>
        <div class="btn-wrap">
          <a-button class="sub-btn" type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button class="pre-btn" type="primary" style="margin-left: 10px;">
            预览
          </a-button>
          <a-button class="delete-btn" type="danger" style="margin-left: 10px;">
            删除
          </a-button>
        </div>
      </div>
    </div>
    <div class="preview">
      <v-detail></v-detail>
    </div>
  </div>
</template>

<script>

import Detail from '~/components/detail'
import Icon from '~/components/icon'
import tagsSelect from '~/components/tagsSelect'
export default {
  components: {
    'v-detail': Detail,
    'v-icon': Icon,
    'v-tags-select': tagsSelect
  },
  data () {
    return {
      tagsSelectOpen: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      tabsKey: 1,
      form: {
        url: '',
        title: '',
        label: [],
        content: '',
        zz: [],
        merge: '',
        reason: ''
      },
      rules: {
        url: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        title: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        label: [
          { required: true, message: 'Please input Activity name', trigger: 'change' },
        ]
      },
      dataSourse1: [
        {
          name: '图神经网络 - GNN',
          id: 1
        }, {
          name: '数据集',
          id: 2
        }, {
          name: '活动 - Event',
          id: 3
        },
      ],
      dataSourse2: [
        {
          name: '讨论 - Discussions',
          id: 4
        }, {
          name: '项目 - Project',
          id: 5
        }, {
          name: '话题 - Topic',
          id: 6
        }
      ]
    }
  },
  created () {
    // console.log(this.$store.state)
  },
  methods: {
    tagsSelectFocus () {
      this.tagsSelectOpen = true
    },
    onSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tabCallback () {

    },
    selectFn (selectedItem) {
      this.form.label.push(selectedItem.name)
    }
  }
}
</script>
